<template>
    <tm-app class="app11" bgImg="f5">
        <view
            :style="{ height: systemInfo.statusBarHeight + 'px' }"
            style="background: #fff"
        ></view>

        <view
            class="header"
            :style="{ top: systemInfo.statusBarHeight + 'px' }"
        >
            <image
                src="/static/firends/right.png"
                class="right"
                @tap="goBack"
            ></image>
            <text class="firend">入群申请</text>
            <view></view>
        </view>

        <scroll-view
            class="content1 d-flex d-c a-center j-center"
            :scroll-y="true"
            :style="{ top: `calc(${systemInfo.statusBarHeight}px + 100rpx)` }"
        >       
        <view class="nodata" v-show="!addGroupList.length">
                    <image
                        class="nodata-img"
                        src="/static/img/nodata.png"
                        alt=""
                    />

                    <view class="text">竟然什么都没有~</view>
                </view>

                <view style="width:710rpx;margin:0 auto;" v-for="(item, index) in addGroupList" :key="index">
                    <view
                        class="success-list"
                    >
                        <view class="user-li">
                            <view class="info">
                                <image
                                    :src="item.avatar"
                                    class="touxiang"
                                ></image>
                                <!-- <image
                                    src="../../static/firends/svip.png"
                                    class="svip"
                                    v-if="item.isvip"
                                ></image> -->
                            </view>
                            <view class="mes-info">
                                <view v-if="item.type==='group'" :class="item.isvip ? 'info-t' : 'info-m'"
                                    >{{ item.nick }}</view
                                >
                                <view class="info-b" v-if="item.type==='group'">
                                    <text class="shenqing">申请加入</text>
                                    <text>{{ item.groupName }}</text>
                                </view>

                                <view class="info-b" v-if="item.type==='people'">
                                    <text class="fs32 bold" style="margin-right:10rpx;">{{ item.nick }}</text>
                                    <text class="shenqing">加你好友</text>
                                </view>

                            </view>
                        </view>
                        <view class="mes-type" @tap="showDialog(item)"
                            >查看</view
                        >
                        <!-- <view class="mes-type2" v-if="item.readstatus === 2"
                            >已拒绝</view
                        >
                        <view class="mes-type3" v-if="item.readstatus === 3"
                            >已同意</view
                        > -->
                        <!-- <view v-if="item.type==='group'" class="quanzi">群</view> -->
                    </view>
                </view>
        </scroll-view>

        <newsQuanziidcation
            :quanziPoverlay="quanziPoverlay"
            :data="currentItem"
            @showMsg="showMsg"
            @closequanziProps="closequanziProps"
            @updateAddGroup="getGroupAddList"
        ></newsQuanziidcation>

        <tm-message
            ref="msg"
            :width="400"
            :height="110"
            color="#9F9F9F"
            :round="6"
            :padding="[0, 0, 0, 0]"
            :margin="[0, 0, 0, 0]"
            :lines="2"
        ></tm-message>


    </tm-app>
</template>
<script lang="ts" setup>
import { ref,computed,watch, nextTick } from "vue";
import {
    onReady,
    onShow,
    onHide,
    onLoad,
    onUnload,
    onPageScroll,
} from "@dcloudio/uni-app";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import newsFriendcation from "@/pages/newfriends/component/friendcation.vue";
import newsQuanziidcation from "@/pages/newfriends/component/quanzidction.vue";
import { getGroupApplicationList,getUserProfile,setAddFriendRead } from "@/hooks/imHooks"


import { imStore } from "@/store/imStore";
const IM_STORE = imStore();
const msg:any = ref(null)
const goBack = () => {
    uni.navigateBack();
};
defineProps({});






const systemInfo: any = systemInfoStore();
const friendPoverlay: any = ref(false);
const quanziPoverlay: any = ref(false);

const currentItem = ref({});

// 加好友弹窗
const showfriendProps = () => {
    friendPoverlay.value = true;
};
// 关闭加好友弹窗
const closefriendProps = () => {
    friendPoverlay.value = false;
};
// 加入群弹窗
const showquanziProps = () => {
    quanziPoverlay.value = true;
};
// 关闭加入群弹窗
const closequanziProps = () => {
    quanziPoverlay.value = false;
};


const showDialog = (item)=>{
    console.log(item);
    const { type } = item;
    currentItem.value = item;
    if(type==='people'){
        showfriendProps(item);
    }else{
        showquanziProps(item);
    }
}

const showMsg = (obj:any)=>{
    uni.showToast({
        icon: "none",
        title: obj.text,
        duration: 1500,
    });
}


const addGroupList = ref([]);


const getGroupAddList = async ()=>{
    // if(uni.$chat_isSDKReady){
    //     return;
    // }
    const res = await getGroupApplicationList();
    const {code ,data} = res;
    if(code!==0){
        uni.showToast({
                    icon: "none",
                    title: '获取群组申请列表失败',
                    duration: 1500,
                });
        return
    }
    const { applicationList } = data;
    applicationList.forEach((item)=>{
        item.application = JSON.parse(JSON.stringify(item));
        item.time = Number(String(item.messageKey).substring(0,10));
    })

    const userIdList = applicationList.map(item => item.applicant);
    const userListRes = await getUserProfile(userIdList);
    
    if(userListRes.code!==0){
        uni.showToast({
                    icon: "none",
                    title: '获取申请人信息失败',
                    duration: 1500,
                });
        return
    }

    const userArr = userListRes.data;

    const arr = applicationList.map((item,index)=>{
        return {
            ...item,
            ...userArr[index],
            type:'group',
        }
    })
    console.log('addGroupList');
    console.log(arr);

    addGroupList.value = arr.filter(item=>item.application.groupID===groupId.value);



    //IM_STORE.setGroupApplicationList(arr) 

    // nextTick(()=>{
    //     IM_STORE.syncGroupRead();
    // })


    
}


const setFrienRead = async ()=>{
    await setAddFriendRead();
}

const setGroupsRead = async ()=>{
    console.log('setGroupsRead')
    console.log(IM_STORE.groupApplicationList)
    IM_STORE.setGroupRead();

}

onShow(()=>{
    // setFrienRead();
    // setGroupsRead();
    // uni.$on('SDKReady',getGroupAddList)
    getGroupAddList();
})

const groupId = ref('')



onLoad(async (option) => {
    if(option.groupId){
        groupId.value = option.groupId;
    }
    /*#ifdef APP-PLUS*/
    //uni.hideTabBar();
    /*#endif*/
    // uni.$on('SDKReady',getGroupAddList)
    // getGroupAddList();
});

onUnload(async () => {
    /*#ifdef APP-PLUS*/
    /*#endif*/
    //uni.$off('SDKReady',getGroupAddList)
});


</script>
<style lang="scss" scoped>
.app11 {


    .header {
        padding: 0 30rpx;
        display: flex;
        height: 100rpx;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        left: 0;
        z-index: 100;
        // position: absolute;
        // top: 0;
        // left: 0;
        width: 750rpx;
        background-color: #ffffff;

        .right {
            width: 48rpx;
            height: 48rpx;
        }

        .firend {
            font-size: 34rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: #000000;
        }
    }

    .content1 {
        position: absolute;
        width: 750rpx;
        left: 0;
        bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
        bottom: calc(env(safe-area-inset-bottom) + 20rpx);
    }

    .content1 {

        .success-list {
            background-color: #ffff;
            width: 710rpx;
            height: 160rpx;
            border-radius: 20rpx;
            display: flex;
            padding: 0 20rpx;
            align-items: center;
            justify-content: space-between;
            position: relative;
            margin-top: 10rpx;

            .mes-type {
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #1dc691;
            }

            .mes-type2 {
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
            }

            .mes-type3 {
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
            }

            .quanzi {
                width: 70rpx;
                height: 40rpx;
                background: #23e2a6;
                border-radius: 0rpx 20rpx 0rpx 20rpx;
                opacity: 0.9;
                position: absolute;
                top: 0;
                font-size: 24rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 600;
                color: #ffffff;
                text-align: center;
                line-height: 40rpx;
            }

            .user-li {
                display: flex;
                align-items: center;

                .info {
                    position: relative;
                    display: flex;
                    align-items: center;

                    .touxiang {
                        width: 100rpx;
                        height: 100rpx;
                        box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
                        border: 3rpx solid #ffffff;
                        border-radius: 50%;
                    }

                    .svip {
                        width: 81rpx;
                        height: 36rpx;
                        position: absolute;
                        bottom: -10rpx;
                        left: 0;
                        right: 0;
                        margin: auto;
                    }
                }

                .mes-info {
                    display: flex;
                    flex-direction: column;

                    margin-left: 16rpx;

                    .info-t {
                        font-size: 32rpx;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 600;
                        color: #f19945;
                    }

                    .info-m {
                        font-size: 32rpx;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 600;
                        color: #333333;
                    }

                    .info-b {
                        font-size: 28rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #666666;
                        margin-top: 15rpx;

                        .shenqing {
                            font-size: 28rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #999999;
                        }
                    }
                }
            }
        }

        .mesage-list {
            margin-top: 10rpx;
            width: 710rpx;
            height: 120rpx;
            background: #ffffff;
            border-radius: 20rpx;
            padding: 0 20rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .user-info {
                display: flex;
                align-items: center;

                .touxiang {
                    width: 100rpx;
                    height: 100rpx;
                    box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
                    border: 3rpx solid #ffffff;
                    border-radius: 50%;
                }

                .name {
                    font-size: 32rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 600;
                    color: #333333;
                    margin: 0 10rpx 0 16rpx;
                }

                .haoyou {
                    font-size: 28rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999999;
                }
            }

            .types {
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
            }
        }
    }
}
</style>    